<template>
  <div class="">
    <el-dialog class="m_dialog" title="安消设施详情" :visible.sync="dialogVisible" width="800" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <div class="content">
        <CustomTitle title="基本信息"></CustomTitle>
        <BaseDescriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="descModel">
          <template #num>
            <span>{{ descModel.num + ' 个' }}</span>
          </template>
        </BaseDescriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import BaseDescriptions from '@/components/PageContent/BaseDescriptions.vue';
export default {
  name: 'DeviceTypesDetail',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    titleIndex: {
      type: Number | String,
      default: 0,
    },
    descData: {
      type: Object,
      default: () => { },
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      descConfig: {
        size: 'medium',
        column: '2',
      },
      descModel: {
        "sort": "",
        "safeDeviceTypeId": "",
        "safeDeviceTypeName": "",
        "deviceBrandId": "",
        "deviceBrandName": "",
        "deviceCode": "",
        "deviceName": "",
        "projectPointId": "",
        "projectPointName": "",
        "installTime": "",
        "expireTime": "",
        "installPosition": "",
        "remark": ""
      },
      descConfigItem: [
        {
          "fieIdName": "safeDeviceTypeName",
          "label": "设备类型",
          "span": 2
        },
        {
          "fieIdName": "deviceBrandName",
          "label": "设备品牌",
          "span": 2
        },
        {
          "fieIdName": "deviceCode",
          "label": "设备编码",
          "span": 2
        },
        {
          "fieIdName": "deviceName",
          "label": "设备名称",
          "span": 2
        },
        {
          "fieIdName": "projectPointName",
          "label": "所属项目",
          "span": 2
        },
        {
          "fieIdName": "installTime",
          "label": "安装日期",
          "span": 2
        },
        {
          "fieIdName": "expireTime",
          "label": "到期日期",
          "span": 2
        },
        {
          "fieIdName": "installPosition",
          "label": "设备位置",
          "span": 2
        },
        {
          "fieIdName": "remark",
          "label": "备注",
          "span": 4
        }
      ],
    };
  },
  computed: {
    ...mapState('dialog', ['dialogTitles']),
  },
  watch: {
    descData: {
      deep: true,
      immediate: true,
      handler() {
        this.descModel = JSON.parse(JSON.stringify(this.descData));
      },
    },
  },
  created() { },
  mounted() { },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
  },
  components: {
    BaseDescriptions,
  },
};
</script>

<style lang="less" scoped></style>
